<template>
	<view>
		<view class="u-page" :style="styleConfig.pageStyle" :class="{hasLogoArea: styleConfig.showLogoArea}">
			<view class="logo-area" v-if="styleConfig.showLogoArea">
				<image class="logo" :src="logoIcon" mode="aspectFit"></image>
			</view>
			<view class="login-type" v-show="showLoginTypes">
				<u-tabs :list="loginTypes" :current="loginType" @click="loginTypeClick"
					:activeStyle="{ color: '#4a4a4a', 'font-size': '16px', 'font-weight': 'bold'}"
					:inactiveStyle="{ color: '#626873', 'font-size': '16px'}"
				></u-tabs>
			</view>
			<view class="form">
				<view class="input-item" v-if="globalConfig.isMultiSpace">
					<view class="left">
						<image class="icon x" src="/static/imgs/login/icon-x.png"></image>
					</view>
					<view class="right" @click="showPicker=true">
						<u--input class="inputlen" placeholder-class="cl" 
							v-model="selectSpace"
							:readonly="true" placeholder="请选择空间"></u--input>
					</view>

					<u-picker :closeOnClickOverlay="true" :show="showPicker" :columns="columns" @confirm="onConfirm" @cancel="showPicker = false"></u-picker>

				</view>

				<view v-show="loginTypes[loginType].typeId == 'pwd'">
					<view class="input-item">
						<view class="left">
							<image class="icon r" src="/static/imgs/login/icon-r.png"></image>
						</view>
						<view class="right">
							<input class="inputlen" placeholder-class="cl" v-model="formUserName.username" placeholder="请输入用户名">
						</view>
					</view>
					<view class="input-item">
						<view class="left">
							<image class="icon s" src="/static/imgs/login/icon-s.png"></image>
						</view>
						<view class="right">
							<input class="inputlen" placeholder-class="cl" :password="showPassword" v-model="formUserName.password" placeholder="请输入密码">
							<view class="eye-btn" @click="eyePasswordClick()">
								<u-icon name="eye-fill" :color="showPassword ? '#d4d9e3' : '#4a4a4a'" size="22"></u-icon>
							</view>
						</view>
					</view>
					<view class="loginBtn">
						<u-button type="primary" text="立即登录" @click="login()"
						:disabled="disabledLoginBtn"></u-button>
					</view>
				</view>

				<view v-show="loginTypes[loginType].typeId == 'phone'">
					<view class="input-item">
						<view class="left">
							<image class="icon r" src="/static/imgs/login/icon-p.png"></image>
						</view>
						<view class="right">
							<input class="inputlen" placeholder-class="cl" v-model="formPhone.phone" placeholder="请输入手机号">
						</view>
					</view>
					<view class="input-item">
						<view class="left">
							<image class="icon s" src="/static/imgs/login/icon-c.png"></image>
						</view>
						<view class="right">
							<input class="inputlen" placeholder-class="cl"  v-model="formPhone.validateCode" placeholder="请输入验证码">
							<view class="getcode">
								<u-button @tap="getCode" type="success" :disabled="validateBtnDisabled"
									size="small">{{ validateTips }}</u-button>
							</view>
						</view>
					</view>
					<u-code :seconds="30" ref="uCode" reef="uCode" @change="codeChange" change-text="XS获取"
						@start="validateBtnDisabled = true" @end="validateBtnDisabled = false"></u-code>
					<view class="loginBtn">
						<u-button type="primary" text="立即登录" @click="loginPhone()"
						:disabled="disabledLoginBtnPhone"></u-button>
					</view>
				</view>
			</view>

			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				logoIcon: '/static/imgs/login/logo.png',
				
				loginType: 0,
				loginTypes: [
					{name: '账号登录', disabled: false, show: true, typeId: 'pwd'},
					{name: '手机登录', disabled: true, show: false, typeId: 'phone'},
				],
				showLoginTypes: true,

				showPassword: true,
				formUserName: {
					username: '',
					password: ''
				},
				formPhone: {
					phone: '',
					validateCode: ''
				},
				validateBtnDisabled: false,
				validateTips: '',


				selectSpace: '',
				selectSpaceId: '',
				columns: [],
				showPicker: false,

				styleConfig: {
					logoIcon: '',
					pageStyle: '',
					showLogoArea: true
				},
			}
		},
		onLoad() {
			var vm = this;
			uni.showLoading();
			vm.doWxLogin().then(res => {
				uni.hideLoading();
				vm.openId = res.openId;

				vm.waitVariable('globalConfig').then(config => {

					if (config.loginPageConfig) {
						if (config.loginPageConfig.loginTypes) {
							vm.loginTypes = config.loginPageConfig.loginTypes;
							vm.loginType = vm.loginTypes.findIndex(n => {
								return !n.disabled;
							});
							vm.showLoginTypes = vm.loginTypes.findIndex(n => n.show) != -1;
						}
						if (config.loginPageConfig.styleConfig)  {
							vm.styleConfig = Object.assign(vm.styleConfig, config.loginPageConfig.styleConfig);
						}
					}


					console.log('1111111111', vm.styleConfig);

					if (config.isMultiSpace) {
						vm.getAndLoadV2('获取空间列表', '', function (res) {
							vm.columns = [res.list.map(n => {
								return {
									text: n.title,
									id: n.oId
								}
							})];
							if (res.list.length == 1) {
								vm.onConfirm({value: vm.columns[0]});
							}
						})		
					}
				});
			});
		},
		computed: {
			...mapState(['globalConfig']),
			disabledLoginBtn: function () {
				return (this.columns.length && !this.selectSpaceId) || !this.formUserName.username || !this.formUserName.password;
			},
			disabledLoginBtnPhone: function () {
				return !this.formPhone.phone || !this.formPhone.validateCode;
			}
		},
		options: { styleIsolation: 'shared' },
		methods: {
			...mapMutations(['doLogin']),
			getRefCmp: function (name) {
				if (this.$refs[name]) {
					if (uni.$u.test.array(this.$refs[name])) {
						return this.$refs[name][0];
					}
					return this.$refs[name];
				} else {
					return global.tempCmp[name]
				}
			},
			loginTypeClick: function (v) {
				var type =  this.loginTypes[v.index];
				if (type.disabled) {
					uni.$u.toast(type.name + '暂未开放');
				} else {
					this.loginType = v.index;
				}
			},
			eyePasswordClick() {
				this.showPassword = !this.showPassword;
			},
			onConfirm: function (v) {
				this.selectSpace = v.value[0].text;
				this.selectSpaceId = v.value[0].id;
				this.showPicker = false;
			},
			login: function () {
				var vm = this;
				uni.showLoading();
				var params = {
					openId: vm.openId,
					userName: vm.formUserName.username,
					password: vm.formUserName.password,
				};
				if (vm.columns.length) {
					params.ipId = vm.selectSpaceId;
				}
				vm.getAndLoad('登录', '/mobile/wx/newApi/login.jsp?'  + vm.$Util.stringify(params), (res) => {
					uni.hideLoading();
					if (res.success && res.data) {
						vm.doLogin({
							...res.data
						});
						params.ipId && (global.ipId = params.ipId);
						vm.$jg.jumpAfterLogin();
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: res.msg || "账号或密码不正确"
						});
					}

				});
			},
			loginPhone: function () {
				var vm = this;
				uni.showLoading();
				var params = {
					openId: vm.openId,
					mobileNo: vm.formPhone.phone,
					code: vm.formPhone.validateCode,
				};
				if (vm.columns.length) {
					params.ipId = vm.selectSpaceId;
				}
				vm.getAndLoad('登录', '/mobile/wx/newApi/login.jsp?'  + vm.$Util.stringify(params), (res) => {
					uni.hideLoading();
					if (res.success && res.data) {
						vm.doLogin({
							...res.data
						});
						params.ipId && (global.ipId = params.ipId);
						vm.$jg.jumpAfterLogin();
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: res.msg || "登录失败"
						});
					}

				});
			},
			codeChange(text) {
				this.validateTips = text;
			},
			getCode() {
				var vm = this;
				var uCode = vm.getRefCmp('uCode');
				var phoneNum = vm.formPhone.phone;
				if (phoneNum && uni.$u.test.mobile(phoneNum)) {
					if (uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						});

						vm.getAndLoad('获取验证码', `${vm.globalConfig.APIMAP['短信验证码']}?openId=${vm.openId}&phone=` + phoneNum,
							function(res) {
								uni.hideLoading();
								if (res.success) {
									uCode.start();
									uni.$u.toast('验证码已发送');
								} else {
									uni.$u.toast(res.msg || '验证码发送失败');
								}
							});
					}
				} else {
					uni.$u.toast(phoneNum ? '手机号码不正确' : '请输入手机号');
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.u-page {
	background: #fff;
	@extend .height100;
}
.logo-area {
	background: url();
	background-size: 100%;
	width: 750rpx;
	height: 466rpx;
	@extend .flex-center;
	.logo {
		width: 309rpx;
		margin-top: -60rpx;
	}
}
.hasLogoArea {
	.login-type {
		margin: -120rpx 60rpx 60rpx;
	}
}
.login-type {
	margin: 120rpx 60rpx 60rpx;
}

.form {
	margin: 40rpx 80rpx 80rpx 80rpx;
	.input-item {
		display: flex;
		border: 2rpx solid #e5e9ee;
		border-radius: 8rpx;
		height: 80rpx;
		margin-bottom: 40rpx;
		background: #fff;
		.left {
			background: #f1f5fa;
			width: 80rpx;
			border-radius: 8rpx 0 0 8rpx;
			border-right: 1px solid #e5e9ee;
			@extend .flex-center;
			image.r {
				width: 33rpx;
				height: 31rpx;
			}
			image.s {
				width: 29rpx;
				height: 37rpx;
			}
			image.x {
				width: 38rpx;
				height: 38rpx;
			}
		}
		.right {
			flex-grow: 1;
			border-radius: 0 8rpx 8rpx 0;
			position: relative;
			.inputlen {
				width: 100%;
				height: 100%;
				background: transparent;
				font-size: 28rpx;
				padding: 0 80rpx 0 40rpx;
				box-sizing: border-box;
			}
			/deep/ .u-input {
				width: 100%;
				height: 100%;
				background: transparent;
				font-size: 28rpx;
				border: none;
				padding-left: 40rpx !important;
				input {
					font-size: 28rpx !important;
				}
			}
			.cl {
				color: #d4d9e3;
			}
			.eye-btn {
				position: absolute;
				top: 22rpx;
				right: 20rpx;
			}
			.getcode {
				position: absolute;
				right: 8px;
				z-index: 50;
				top: 10rpx;
				z-index: 50;
			}
		}
	}
}
.loginBtn {
	margin: 120rpx 80rpx;
}
</style>
